<template>
  <div class="dashboard-container">
    <div class="top-lat-lng">
      <div class="title">经纬度：</div>
      <div class="text-box">
        <el-input v-model="from.lat" size="mini" placeholder="请输入经度" />
        <el-input v-model="from.lng" size="mini" placeholder="请输入纬度" />
      </div>
      <div>
        <el-button size="mini" type="primary" @click="onDiffLocation"
          >计算点位置</el-button
        >
      </div>
    </div>
    <div class="map-box">
      <div id="map-container"></div>
    </div>
    <div>
      绘制：鼠标左键点击及移动即可绘制图形
      <br />
      结束绘制：鼠标左键双击即可结束绘制折线、多边形、多边形会自动闭合；圆形、椭圆单击即可结束
      <br />
      中断：绘制过程中按下esc键可中断该过程
    </div>
  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  data() {
    return {
      marker: undefined,
      mapObj: undefined, //地图实例
      editor: undefined, //编辑器
      simplePath: [], //用户画出来的围栏
      from: {
        lat: 30.198889,
        lng: 120.238551,
      },
    }
  },
  mounted() {
    this._setMapArea()
    this._setMarker()
  },
  destroyed() {
    this.editor.stop()
    this.editor.destroy()
  },
  methods: {
    onDiffLocation() {
      if (this.simplePath.length === 0) {
        this.$message.error('请先画自定义围栏')
        return
      }
      this._setMarker()
      this._diffLatLngInPath(this.from, this.simplePath)
    },
    // -------------------------------------------地图设置--开始----------------------------
    //创建点标记
    _setMarker() {
      const { lat, lng } = this.from
      if (this.marker) {
        this.marker.remove('demo')
      }
      /* eslint-disable */
      this.marker = new TMap.MultiMarker({
        map: this.mapObj, //指定点标记图层所覆盖的地图容器
        // 设置点标记数据
        geometries: [
          {
            id: 'demo', //指定点标记id
            position: new TMap.LatLng(lat, lng), // 标记位置(经度，纬度)
          },
        ],
      })
    },
    //绘制地图
    _setMapArea() {
      /* eslint-disable */
      this.mapObj = new TMap.Map('map-container', {
        zoom: 10,
        center: new TMap.LatLng(30.198889, 120.238551),
      })
      const polygon = new TMap.MultiPolygon({
        map: this.mapObj,
      })
      this.editor = new TMap.tools.GeometryEditor({
        map: this.mapObj, // 编辑器绑定的地图对象
        overlayList: [
          //可编辑图层
          {
            overlay: polygon,
            id: 'polygon',
          },
        ],
        //EDITOR_ACTION.DRAW 绘制模式，该模式下用户可绘制新图形
        //EDITOR_ACTION.INTERACT 交互模式，该模式下用户可选中图形进行删除、修改
        actionMode: TMap.tools.constants.EDITOR_ACTION.DRAW, // 编辑器的工作模式
        activeOverlayId: 'polygon', // 激活图层
        snappable: true, // 开启吸附
      })
      // 监听绘制结束事件，获取绘制几何图形
      this.editor.on('draw_complete', (geometry) => {
        const { paths } = geometry
        // this.$message.success(JSON.stringify(paths))
        polygon.destroy()
        this.editor.stop()
        this.editor.destroy()
        this.simplePath = [...paths]
        this._editMap()
      })
    },
    //编辑地图
    _editMap() {
      this.editor = new TMap.tools.GeometryEditor({
        map: this.mapObj, // 编辑器绑定的地图对象
        overlayList: [
          // 可编辑图层
          {
            overlay: new TMap.MultiPolygon({
              map: this.mapObj,
              styles: {
                highlight: new TMap.PolygonStyle({
                  color: 'rgba(255, 255, 0, 0.6)',
                }),
              },
              geometries: [
                {
                  paths: this.simplePath,
                },
              ],
            }),
            id: 'editpolygon',
            selectedStyleId: 'highlight',
          },
        ],
        actionMode: TMap.tools.constants.EDITOR_ACTION.INTERACT, // 编辑器的工作模式
        activeOverlayId: 'editpolygon', // 激活图层
        selectable: true, // 开启点选功能
        snappable: true, // 开启吸附
      })
      this.editor.on('adjust_complete', (evtResult) => {
        const { paths } = evtResult
        this.simplePath = [...paths]
        console.log(JSON.stringify(paths))
        // this.$message.success(JSON.stringify(paths))
      })
    },
    //计算经纬度是否在多边形内
    _diffLatLngInPath(center, pathList) {
      const { lat, lng } = center
      const pos = new TMap.LatLng(lat, lng)
      const isIn = TMap.geometry.isPointInPolygon(pos, pathList)
      if (isIn) {
        this.$message.success('当前坐标在自定义围栏内')
      } else {
        this.$message.error('当前坐标不在自定义围栏内')
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  position: relative;
  margin-bottom: 130px;
  .top-lat-lng {
    display: flex;
    padding: 20px 30px 0 40px;
    align-items: center;
    .text-box {
      display: flex;
      margin-right: 20px;
      el-input {
        width: 60px;
      }
    }
  }
  .map-box {
    z-index: 1;
    width: 700px;
    margin-left: 40px;
    position: relative;
    margin-top: 30px;
  }
}
</style>
